<!DOCTYPE html>
<html>
<head>
    <:include file="../common/css.html" title="缴费记录"/>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card card-box-shadow">
    	<div class="layui-card-body">
    	    <!-- 表格工具栏 -->
	        <form class="layui-form toolbar" lay-filter="payHistoryTbSearchForm">
	            <div class="layui-form-item">
	                <div class="layui-inline">
	                    <label class="layui-form-label w-auto">类型：</label>
	                    <div class="layui-input-inline mr0">
                            <select id="typeSearch" name="type" lay-filter="typeSearch" lay-verify="" lay-search="">
                                <option value="year">年</option>
                                <option value="season">季度</option>
                                <option value="month">月</option>
                                <option value="week">周</option>
                                <option value="day">日</option>
                            </select>
	                    </div>
	                </div>
	                <div class="layui-inline">
	                    <label class="layui-form-label w-auto"></label>
	                    <div class="layui-input-inline mr0">
                        <input id="yearSearch" name="years" class="layui-input" type="text" placeholder="请选择年"/>
                        <input id="monthSearch" name="months" class="layui-input layui-hide"
                               type="text" placeholder="请选择月份" autocomplete="off"/>
                    </div>
	                </div>
	                <div class="layui-inline">
	                    <button class="layui-btn icon-btn" lay-filter="payHistoryTbSearch" id="payHistoryTbSearch" lay-submit>
	                        <i class="layui-icon">&#xe615;</i>搜索
	                    </button>
<!--                        <button id="btnAdd" type="button" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>-->
	                </div>
	            </div>
	        </form>
	        <!-- 数据表格 -->
        	<table id="payHistorySummaryTable" lay-filter="payHistorySummaryTable"></table>

    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="payHistoryTbBar">
	<% if(so.hasPermission("customer:payHistory:update")){ %>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <% } %>
    <% if(so.hasPermission("customer:payHistory:remove")){ %>
    <a class="layui-btn layui-btn-danger layui-btn-xs"
       data-dropdown="#payHistoryTbDelDrop{{d.LAY_INDEX}}" no-shade="true">删除</a>
    <% } %>
    <div class="dropdown-menu-nav dropdown-popconfirm dropdown-top-right layui-hide"
         id="payHistoryTbDelDrop{{d.LAY_INDEX}}"
         style="max-width: 200px;white-space: normal;min-width: auto;margin-left: 10px;">
        <div class="dropdown-anchor"></div>
        <div class="dropdown-popconfirm-title">
            <i class="layui-icon layui-icon-help"></i>
            确定要删除{{d.customerName}}吗？
        </div>
        <div class="dropdown-popconfirm-btn">
            <a class="layui-btn" btn-cancel>取消</a>
            <a class="layui-btn layui-btn-normal" lay-event="del">确定</a>
        </div>
    </div>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="payHistoryPicTbBar">

{{#
layui.each(d.picAdd.split(","), function(index, item){
}}
<img data-index="{{index}}" data-src="/file/{{item}}" src="/file/{{item}}" class="tb-img-circle" tb-img alt="" style="height: 24px;"/>
{{#
})
}}

</script>
<!-- js部分 -->
<:include file="../common/js.html"/>
<script type="text/javascript">
layui.use(['layer', 'form', 'table', 'tableX', 'util', 'admin','xmSelect','formX','dropdown','laydate','upload'], function () {
let $ = layui.jquery;
let layer = layui.layer;
let form = layui.form;
let table = layui.table;
let tableX = layui.tableX;
let util = layui.util;
let admin = layui.admin;
let formX = layui.formX;
let xmSelect = layui.xmSelect;
let laydate = layui.laydate;
let upload = layui.upload;
    
top.payHistorySummaryTableSummaryReload = function(data_sel){
    insTb.reload();
}


changeType()
form.on('select(typeSearch)', function(data){
    changeType()
});
function changeType() {
    if($('#typeSearch').val()=='year' || $('#typeSearch').val()=='season'
        || $('#typeSearch').val()=='month') {
        $('#yearSearch').removeClass('layui-hide')
        $('#monthSearch').removeClass('layui-hide').addClass('layui-hide')
    } else if($('#typeSearch').val()=='week' || $('#typeSearch').val()=='day') {
        $('#yearSearch').removeClass('layui-hide').addClass('layui-hide')
        $('#monthSearch').removeClass('layui-hide')
    }
    setTimeout(submitSearch, 200)
}
function submitSearch() {
    $("#payHistoryTbSearch").click();
}
//年选择器
laydate.render({
    elem: '#yearSearch'
    ,type: 'year'
    ,done: function () {
        setTimeout(submitSearch, 200)
    }
});
//年月选择器
laydate.render({
    elem: '#monthSearch'
    ,type: 'month'
    ,done: function () {
        setTimeout(submitSearch, 200)
    }
});
// 渲染表格
let insTb = tableX.render({
    elem: '#payHistorySummaryTable'
    ,url: '../payHistory/listSummaryJf'
    ,page: true
    ,height: 'full-100'
    ,toolbar:true
    // ,toolbar: ['<p>',
    //     <% if(so.hasPermission("customer:payHistory:save")){ %>
    //     '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
    //     <% } %>
    //     <% if(so.hasPermission("customer:payHistory:remove")){ %>
    //     '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
    //     <% } %>
    //     '</p>'].join('')
    ,cellMinWidth: 100
    ,cols: [[
        // {type: 'checkbox'}
        {type: 'numbers'}
        ,{field: "payTime",  title: "时间", sort: false, hide:false }
        ,{field: "price",  title: "金额", sort: false, hide:false }
    ]]
    ,where: {type:$('#typeSearch').val(), years:$('#yearSearch').val(), months:$('#monthSearch').val()}
    ,done: function() {
    }
});

// 搜索
form.on('submit(payHistoryTbSearch)', function (data) {
    insTb.reload({where: data.field, page: {curr: 1}});
    return false;
});

$('.search_key').bind('keypress',function(event){
    if(event.keyCode == "13")
    {
        $("#payHistoryTbSearch").click();
    }
});

});
</script>
</body>
</html>
